<template>
  <div>
    <!-- 功能 ///////////////////////////////////////////////////////////////////////////-->
    <div class="header-menu">
      <el-input placeholder="搜索排课" v-model="keyword" @clear="inputListener" clearable>
        <el-button slot="append" type="primary" icon="el-icon-search" @click="searchCourse">搜索</el-button>
      </el-input>
      <!-- <el-button slot="append" type="primary" @click="addInfo">添加</el-button> -->
      <el-select v-model="value11" placeholder="学期">
        <el-option v-for="item in semester1" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-select v-model="value22" placeholder="学院" @change="queryClass1">
        <el-option v-for="item in grade" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-select v-model="value33" placeholder="班级" @change="searchCourse1">
        <el-option v-for="item in classNo1" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>

    </div>
    <br>
    
    <!-- 上面放一个说明，添加交材按钮 -->

    <!-- 教材信息 -->
    <el-table :data="courseInfoData" size="mini" :stripe="true" :highlight-current-row="true">
      <el-table-column label="序号" type="selection"></el-table-column>
      <!-- <el-table-column prop="id" label="ID"></el-table-column> -->
      <el-table-column prop="semester" label="学期"></el-table-column>
      <el-table-column prop="id" label="排课编号"></el-table-column>

      <el-table-column prop="courseName" label="课程名"></el-table-column>
      <el-table-column prop="realname" label="授课老师"></el-table-column>
      <el-table-column prop="classNo" label="授课班级"></el-table-column>
      <el-table-column prop="classTime" label="时间编号"></el-table-column>
      <el-table-column prop="classroomNo" label="教室"></el-table-column>

      <el-table-column prop="operation" label="操作">
        <template slot-scope="scope">
          <!-- <el-button type="danger" size="mini" @click="deleteById(scope.$index, scope.row)">删除</el-button> -->
          <el-button type="primary" size="mini" @click="handleClick3(scope.$index, scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹出表单调课 -->
    <el-dialog title="调课" :visible.sync="visibleForm">
      <div class="top-select">

        <div class="my-container">
          <el-select v-model="value1" placeholder="星期">
            <el-option v-for="item in  dayChoose" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-select v-model="value2" placeholder="节数" @change="conflictClass">
            <el-option v-for="item in  timeChoose" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <!-- <el-select v-show="isBothValuesSelected" v-model="teachbuild.value" placeholder="请选择教学楼"
            @change="selectTeachbuild" clearable class="select-t">
            <el-option v-for="item in teachbuild" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select> -->
          <el-select  v-model="teachbuild.value" placeholder="请选择教学楼"
            @change="selectTeachbuild" clearable class="select-t">
            <el-option v-for="item in teachbuild" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <p v-show="isConflict" class="text-success">该时间不存在冲突</p>
          <p v-show="isConflict" class="text-danger">该时间存在冲突，请重新选择</p>
        </div>

      </div>
      <el-form :model="editFormData" label-position="left" label-width="80px" :rules="editFormRules">
        <el-form-item label="排课编号" prop="id">
          <el-input v-model="editFormData.id" autocomplete="off" disabled></el-input>
        </el-form-item>
        <!-- 表单 -->
        <el-table :data="classroomData" size="mini" :stripe="true" :highlight-current-row="true">
          <el-table-column label="序号" type="selection"></el-table-column>
          <!-- <el-table-column prop="id" label="ID"></el-table-column> -->
          <el-table-column prop="classroomNo" label="教室编号"></el-table-column>
          <!-- <el-table-column prop="classroomName" label="教室名"></el-table-column>
          <el-table-column prop="teachbuildNo" label="所属教学楼"></el-table-column> -->
          <el-table-column prop="capacity" label="容量"></el-table-column>
          <el-table-column prop="remark" label="备注"></el-table-column>

          <el-table-column prop="operation" label="操作">
            <template slot-scope="scope">
              <el-button v-if=null type="success" size="mini" @click="order(scope.$index, scope.row)">预约</el-button>
              <!-- <el-button type="success" size="mini" @click="commitInfo(scope.row)">调课</el-button> -->
              <el-button v-if="scope.row.remark !== '占用'" type="success" size="mini"
                @click="commitInfo(scope.row)">调课</el-button>
              <!-- <el-button v-else type="success" size="mini" disabled>占用</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="commitForm = true">提 交</el-button>
      </div>
    </el-dialog>
    <el-dialog title="退出调课" :visible.sync="commitForm">
      <p>{{ conflict1 }}</p>
      <el-button @click="commitForm = false">取 消</el-button>
      <el-button type="primary" @click="handleClick2()">确定</el-button>
    </el-dialog>

    <!-- 分页 -->
    <div class="footer-button">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page.sync="page" :page-size="pageSize" layout="total, prev, pager, next" :total="total"></el-pagination>
    </div>
  </div>
</template>
  
<script>
export default {
  name: "CourseInfoList",
  data() {
    return {
      semester1: [
        {
          value: "2022-2023-1",
          label: "2022-2023-1"
        },
        {
          value: "2022-2023-2",
          label: "2022-2023-2"
        },
      ],
      teachbuild: [
        {
          value: "",
          label: ""
        }
      ],
      isConflict: "",
      classroomData: [],
      dayChoose: [
        {
          value: "0",
          label: "星期一"
        },
        {
          value: "5",
          label: "星期二"
        },
        {
          value: "10",
          label: "星期三"
        },
        {
          value: "15",
          label: "星期四"
        },
        {
          value: "20",
          label: "星期五"
        }
      ],
      conflictInfo: "",
      conflict1: "",
      commitForm: false,
      remark1: "",
      classroomNo1: "",
      value11: "",
      value1: "",
      modifyId: '',
      timeChoose: [
        {
          value: "1",
          label: "第一节"
        },
        {
          value: "2",
          label: "第二节"
        },
        {
          value: "3",
          label: "第三节"
        },
        {
          value: "4",
          label: "第四节"
        },
        {
          value: "5",
          label: "第五节"
        }
      ],
      value2: "",
      valueSum: "",
      courseInfoData: [],
      classInfoData: [],
      teacherInfoData: [],
      editFormData: {
        courseNo: ''
      },
      keyword: '',
      page: 1,
      pageSize: 10,
      total: 0,
      type: 1,
      visibleForm: false,
      editFormRules: {
        courseName: [
          { required: true, message: '请输入教材名', trigger: 'blur' },
        ],
        courseAttr: [
          { required: true, message: '课程属性，01:专业必修，02:通识,03:实验课,04:体育课', trigger: 'blur' },
        ]
      },
      value33: "",
      classNo1: [
        {
          value: "",
          label: ""
        }
      ],
      value22: "",
      grade: [
        {
          value: "01",
          label: "计算机科学学院"
        },
        {
          value: "02",
          label: "美术学院"
        },
        {
          value: "03",
          label: "物理与电子信息学院"
        }
      ],
    };
  },
  created() {
    this.allCourseInfo();
  },
  mounted() {
    this.allCourseInfo();
  },
  computed: {
    isBothValuesSelected() {
      return this.value1 && this.value2
    }
  },
  methods: {

    // 根据关键字搜索排课信息,有问题呀
    searchCourse1() {
      let page = 1
      this.$axios
        .get("http://localhost:8080/coursePlanWithTeacherCourse/searchByClass/" + this.value11 + "/" + this.value33 + "/" + page)
        .then(res => {
          let ret = res.data.data
          this.courseInfoData = ret.records
          this.total = ret.total
          this.$message({ message: '查询成功', type: 'success' })
        })
        .catch(error => {
          this.$message.error('查询失败')
        });
    },
    queryClass1() {
      this.$axios
        .get("http://localhost:8080/class-grade/" + this.value22)
        .then(res => {
          //alert(this.value22)
          let r = res.data.data;
          this.classNo1.splice(0, this.classNo1.length);
          this.value33 = ''
          r.map(v => {
            this.classNo1.push({
              value: v.classNo,
              lable: v.className
            })
          })
        })
        .catch(error => {
          this.$message.error("失败")
        });
    },
    //多事件触发
    handleClick(row) {
      this.commitForm = true;
      this.commitInfo(row);

    },
    handleClick3(index, row) {
      this.editById(index, row);
      this.searchTime(row);

    },
    handleClick2() {
      this.commitForm = false;
      this.value2 = "";
      this.value1 = "";
      this.teachbuild.value = "";
      this.teachbuild.label = "";
      this.classroomData = [];

    },
    // 子页面提交方法
    commit() {
      if (this.type == 1) {
        this.modifyCourseInfo(this.editFormData)
      } else {
        this.add()
      }
    },

    //获取班级课表寻找教师这个学期的所有上课时间
    searchTimeofteacher(row) {

      // this.page = 1
      this.$axios
        .get("http://localhost:8080/classPlan/class/" + row.teacherNo + "/" + row.semester)
        .then(res => {

          let ret = res.data.data
          //this.classInfoData 
          let classTimes = []
          for (let record of ret) {
            classTimes.push(record.classTime)
          }
          this.teacherInfoData = classTimes
          this.teacherInfoData = this.teacherInfoData.map(Number);
          console.log(1111111);
          this.total = ret.total
          console.log(this.classInfoData)
          console.log(this.courseInfoData)
          this.$message({ message: '班级占用查询成功', type: 'success' })

        })
        .catch(error => {
          this.$message.error('查询失败')
        });
    },
    //获取班级课表寻找班级这个学期的所有上课时间
    searchTime(row) {

      // this.page = 1
      this.$axios
        .get("http://localhost:8080/classPlan/class/" + row.classNo + "/" + row.semester)
        .then(res => {

          let ret = res.data.data
          //this.classInfoData 
          let classTimes = []
          for (let record of ret) {
            classTimes.push(record.classTime)
          }
          this.classInfoData = classTimes
          this.classInfoData = this.classInfoData.map(Number);
          console.log(1111111);
          this.total = ret.total
          console.log(this.classInfoData)
          console.log(this.courseInfoData)
          this.$message({ message: '班级占用查询成功', type: 'success' })

        })
        .catch(error => {
          this.$message.error('查询失败')
        });
    },
    // 更新教材信息
    modifyCourseInfo(modifyData) {
      this.$axios
        .post("http://localhost:8080/coursePlanWithTeacherCourse/modify/" + this.editFormData.id, modifyData)
        .then(res => {
          this.$message({ message: "更新成功", type: "success" })
          this.allCourseInfo()
          this.visibleForm = false
        })
        .catch(error => {
          this.$message.error("更新失败")
        });
    },
    //更新课表
    commitInfo(row) {
      let classTime = parseInt(this.value1) + parseInt(this.value2);
      let id = this.modifyId;
      let classroomNo = row.classroomNo;
      this.classroomNo1 = classroomNo;
      this.remark1 = row.remark;

      if (row.remark === "占用") {
        this.conflict1 = "继续操作被占排课会被挂起";
        this.commitForm = true;
      } else {
        this.$confirm(`教室占用情况：${row.remark}  是否继续调课 `, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let data = {
              id: id,
              classroomNo: classroomNo,
              classTime: classTime,
            };
            this.$axios
              .post("http://localhost:8080/updateCoursePlan", data)
              .then((res) => {
                this.$message({ message: "更新成功", type: "success" });
                this.allCourseInfo();
                this.searchEmptyRoom(this.teachbuildNo);
                this.commitForm = true;
                this.conflict1 = "已完成调课";
                this.visibleForm = false;
              })
              .catch((error) => {
                this.$message.error("更新失败");
              });
          })
          .catch(() => {
            this.$message({ message: "已取消操作", type: "info" });
          });
      }
    },

    // commitInfo(row) {
    //   let classTime = parseInt(this.value1) + parseInt(this.value2)
    //   let id = this.modifyId
    //   let classroomNo = row.classroomNo
    //   this.classroomNo1 = classroomNo
    //   this.remark1 = row.remark

    //   this.$confirm(`教室占用情况：${row.remark} `, "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning"
    //   })
    //     .then(() => {
    //       let data = {
    //         id: id,
    //         classroomNo: classroomNo,
    //         classTime: classTime
    //       }
    //       this.$axios
    //         .post("http://localhost:8080/updateCoursePlan", data)
    //         .then(res => {
    //           this.$message({ message: "更新成功", type: "success" })
    //           this.allCourseInfo()
    //           this.searchEmptyRoom(this.teachbuildNo)
    //           this.commitForm = true
    //           if (row.remark === "占用") {
    //             this.conflict1 = "继续操作被占排课会被挂起"
    //             this.commitForm = true
    //           } else {
    //             this.conflict1 = "是否继续调课"
    //           }
    //         })
    //         .catch(error => {
    //           this.$message.error("更新失败")
    //         })
    //     })
    //     .catch(() => {
    //       this.$message({ message: "已取消操作", type: "info" })
    //     })
    // },

    // //更新排课信息
    // commitInfo(row) {
    //   let classTime = parseInt(this.value1) + parseInt(this.value2)
    //   let id = this.modifyId
    //   let classroomNo = row.classroomNo
    //   this.classroomNo1 = classroomNo
    //   this.remark1 = row.remark
    //   console.log(row)
    //   console.log(this.modifyId)
    //   console.log(classTime)
    //   console.log(row.remark)
    //   let data = {
    //     id: id,
    //     classroomNo: classroomNo,
    //     classTime: classTime
    //   }
    //   this.$axios
    //     .post("http://localhost:8080//updateCoursePlan",data)
    //     .then(res => {
    //       this.$message({ message: "更新成功", type: "success" })
    //       this.allCourseInfo()

    //     })
    //     .catch(error => {
    //       this.$message.error("更新失败")
    //     });
    // },
    cancel() {
      this.visibleForm = false
      this.editFormData.courseName = ''
      this.editFormData.courseAttr = ''
      this.editFormData.publisher = ''
      this.editFormData.remark = ''
    },

    handleSizeChange() { },

    handleCurrentChange(v) {
      this.page = v;
      if (this.keyword === '' && this.value11 === '' && this.value22 === '' && this.value33 === '') {
        this.allCourseInfo()
      } else if (this.value33 !== '') {
        this.searchCourse1()
      } else {
        this.searchCourse()
      }
    },
    conflictClass() {
      this.valueSum = parseInt(this.value1) + parseInt(this.value2);
      this.classInfoData = this.classInfoData.map(item => parseInt(item));
      let conflictItem = this.classInfoData.find(item => item === this.valueSum);
      if (conflictItem !== undefined) {
        this.$confirm(`存在班级冲突，是否继续？\n该班级在这个时间已经有课了\n`, "提示", {
        
          // this.$confirm(`存在班级冲突，是否继续？\n该班级在这个时间已经有课了\n冲突的时间：${this.classInfoData.join(", ")}`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            // 用户点击确定按钮后执行的操作
            this.value2 = "";
          })
          .catch(() => {
            // 用户点击取消按钮后执行的操作
          });
      }
      this.teacherInfoData = this.teacherInfoData.map(item => parseInt(item));
      let conflictItem1 = this.teacherInfoData.find(item => item === this.valueSum);
      if (conflictItem1 !== undefined) {
        this.$confirm(`存在班级冲突，是否继续？\n该班级在这个时间已经有课了\n冲突的时间：${this.teacherInfoData.join(", ")}`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            // 用户点击确定按钮后执行的操作
            this.value2 = "";
          })
          .catch(() => {
            // 用户点击取消按钮后执行的操作
          });
      }
    },

    selectTeachbuild() {
      this.teachbuildNo = this.teachbuild.value
      this.searchEmptyRoom(this.teachbuildNo)
    },
    // 监听搜索框
    inputListener() {
      this.allCourseInfo();
    },
    // 查询所有教学楼
    queryTeachbuild() {
      this.$axios
        .get("http://localhost:8080/teachbuildinfo/list")
        .then(res => {
          console.log(res);
          if (res.data.code == 0) {
            let ret = res.data.data;
            this.teachbuild.splice(0, this.teachbuild.length);
            ret.map(v => {
              this.teachbuild.push({
                value: v.teachBuildNo,
                label: v.teachBuildName
              });
            });
          } else {
            alert(res.data.message);
          }
        })
        .catch(error => { });
    },
    // 根据关键字搜索排课信息,有问题
    searchCourse() {
      let page = 1
      let url = "http://localhost:8080/coursePlanWithTeacherCourse/search"
      if (this.keyword === '') {
        url += "1/" + page
      } else {

        console.log(1231232)
        url += "/" + page + "/"
      }
      url += this.keyword

      this.$axios
        .get(url)
        .then(res => {
          let ret = res.data.data
          this.courseInfoData = ret.records
          this.total = ret.total
          this.$message({ message: '查询成功', type: 'success' })
        })
        .catch(error => {
          this.$message.error('查询失败')
        });
    },

    //手动调课搜索空教室
    searchEmptyRoom(teachbuildNo) {
      this.$axios
        .get("http://localhost:8080//classroom/empty/" + teachbuildNo + "/" + this.value1 + "/" + this.value2 + "/1")
        .then(res => {
          console.log(res)
          if (res.data.code == 0) {
            // let ret = res.data.data
            this.classroomData = res.data.data
            this.total = this.classroomData.length
          }
          this.$message({ message: '查询成功', type: 'success' })
        })
        .catch(error => {
          this.$message.error('查询失败')
        });
    },
    // 删除教材信息
    deleteById(index, row) {
      this.deleteCourseInfoById(row.id)
    },

    // 编辑教材
    editById(index, row) {
      this.modifyId = row.id
      this.editFormData = row
      this.visibleForm = true
      this.type = 1
    },

    // addInfo() {
    //   this.type = 2 // 添加
    //   this.visibleForm = true
    //   // this.editFormData = {}
    //   this.$axios.get("http://localhost:8080/courseinfo/get-no")
    //   .then(res => {
    //     if (res.data.code == 0) {
    //       // 获取课程编号
    //       this.editFormData.courseNo = res.data.message
    //     } else {
    //       this.$message.error(res.data.message)
    //     }
    //   })
    //   .catch(error => {})
    // },

    // // 添加教材
    // add() {
    //   this.$axios.post("http://localhost:8080/courseinfo/add", this.editFormData)
    //   .then(res => {
    //     if (res.data.code == 0) {
    //       this.allCourseInfo()
    //       this.$message({message:'添加成功', type: 'success'})
    //       this.visibleForm = false
    //       this.editFormData = {}
    //     } else {
    //       this.$message.error(res.data.message)
    //     }
    //   })
    //   .catch(error => {})
    // },

    // // 根据id删除教材信息
    // deleteCourseInfoById(id) {
    //   this.$axios
    //   .delete("http://localhost:8080/courseinfo/delete/" + id)
    //   .then(res => {
    //     this.allCourseInfo()
    //     this.$message({message:'删除成功', type: 'success'})
    //   })
    //   .catch(error => {
    //     this.$message.error("删除失败")
    //   });
    // },



    //列出所有空教室
    queryClass() {
      this.$axios
        .get("http://localhost:8080/class-grade/01")
        .then(res => {
          //alert(this.value2)
          let r = res.data.data;
          this.classNo.splice(0, this.classNo.length);
          this.value3 = ''
          r.map(v => {
            this.classNo.push({
              value: v.classNo,
              lable: v.className
            })
          })
        })
        .catch(error => {
          this.$message.error("失败")
        });
    },
    // 分页查询所有教材信息
    allCourseInfo() {
      this.$axios
        .get("http://localhost:8080/coursePlanWithTeacherCourse/getAllByInfo/" + this.page)
        .then(res => {
          let ret = res.data.data
          this.courseInfoData = ret.records
          this.total = ret.total
        })
        .catch(error => {
          this.$message.error("查询教材信息失败")
        });
    }
  },
  mounted() {
    this.queryTeachbuild();
  },
};
</script>
  
<style scoped lang="less">
.footer-button {
  margin-top: 10px;
}

.el-input-group {
  width: 40%;
}

.header-menu {
  margin-bottom: 5px;
  padding: 0;
  text-align: left;
  margin-bottom: 5px;
}

.my-container {
  margin-bottom: 20px;
}
</style>
  